<template>
  <div>
    <el-table v-loading="loading" :data="list" class="layui-table" stripe empty-text="暂无数据">
      <el-table-column label="标题" align="center">
        <template slot-scope="scope">
          <router-link
            class="link"
            :to="{name: 'detail', params: {tid: scope.row.tid._id}}"
          >{{scope.row.title}}</router-link>
        </template>
      </el-table-column>
      <el-table-column label="作者" width="120" align="center">
        <template slot-scope="{row}">{{row.tid.uid.name}}</template>
      </el-table-column>
      <el-table-column label="阅读量" width="70" align="center">
        <template slot-scope="{row}">{{row.tid.reads}}</template>
      </el-table-column>
      <el-table-column label="发布时间" width="140" header-align="center">
        <template slot-scope="{row}">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{row.tid.created | moment}}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="80" align="center">
        <template slot-scope="scope">
          <div>
            <el-tag v-if="scope.row.isEnd === '0'" type="success" effect="dark">未结</el-tag>
            <el-tag v-else type="danger" effect="dark">已结</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="标签" width="70" align="center">
        <template slot-scope="{row}">
          <el-tag
            :type="catalogs[row.tid.catalog].type"
            disable-transitions
          >{{catalogs[row.tid.catalog].text}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="created" label="收藏时间" width="120" align="center">
        <template slot-scope="scope">{{scope.row.created | moment}}</template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="80" align="center">
        <template slot-scope="scope">
          <el-button type="danger" @click="delCollect(scope.row)" size="small" plain>取消</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="total > 0"
      @current-change="handleCurrentChange"
      :page-size="limit"
      layout="total, prev, pager, next"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import { getCollect, addCollect } from '@/api/user'
import Pagination from '@/components/modules/pagination/Index'
export default {
  name: 'my-collection',
  components: {
    'imooc-page': Pagination
  },
  data() {
    return {
      current: 0,
      total: 0,
      list: [],
      page: 0,
      limit: 8,
      loading: true,
      catalogs: {
        ask: {
          text: '提问',
          type: 'primary'
        },
        share: {
          text: '分享',
          type: 'success'
        },
        discuss: {
          text: '讨论',
          type: 'info'
        },
        advise: {
          text: '建议',
          type: 'warning'
        }
      }
    }
  },
  mounted() {
    this.getCollectList()
  },
  methods: {
    /**
     * 取消收藏
     */
    async delCollect(row) {
      const options = {
        tid: row.tid._id,
        isFav: 1
      }
      const res = await addCollect(options)
      if (res.code === 200) {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getCollectList()
      }
    },
    /**
     * 获取当前用户收藏列表
     */
    async getCollectList() {
      const res = await getCollect({
        page: this.current,
        limit: this.limit
      })
      if (res.code === 200) {
        this.loading = false
        this.list = res.data
        this.total = res.total
      }
    },
    handleCurrentChange(val) {
      this.current = val - 1
      this.getCollectList()
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  width: 70%;
}
</style>
